<section class="app-page select-none">
  <header class="header">
    <div class="header-top">
      <img [src]="commonService.settings.favicon" class="logo" alt="logo" />
      <div class="open" [class.active]="open" (click)="handleToggleOpen()">
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>

    <nav class="nav-open" [class.active]="open">
      <div
        *ngFor="
          let item of commonService.websiteList;
          let i = index;
          trackBy: commonService.trackByItem
        "
        (click)="handleCilckNav(i)"
        [class.active]="commonService.page === i"
        class="nav-title"
      >
        {{ item.title }}
      </div>
    </nav>
  </header>

  <app-search-engine />

  <div class="wrapper" *ngIf="commonService.websiteList[commonService.page]">
    <nav
      class="children-nav"
      *ngIf="commonService.websiteList[commonService.page]?.nav?.length"
    >
      <span
        class="tag"
        *ngFor="
          let item of commonService.websiteList[commonService.page].nav;
          let i = index;
          trackBy: commonService.trackByItem
        "
        [class.active]="commonService.id === i"
        (click)="commonService.handleSidebarNav(i)"
      >
        {{ item.title }}
      </span>
    </nav>
    <div *ngFor="let item of commonService.currentList; index as i">
      <h2 class="block-title" *ngIf="item.title">
        {{ item.title }} x {{ item.nav.length }}
      </h2>

      <div
        style="padding: 0 10px"
        nz-row
        [nzGutter]="[16, 16]"
        [style.display]="item.collapsed ? 'none' : ''"
      >
        <div
          class="gutter-row"
          nz-col
          [nzSpan]="8"
          [nzMd]="12"
          [nzXl]="6"
          [nzXs]="24"
          *ngFor="
            let el of item.nav;
            index as j;
            trackBy: commonService.trackByItemWeb
          "
        >
          <app-card
            [cardStyle]="commonService.settings.appCardStyle"
            [dataSource]="el"
            [indexs]="[commonService.page, commonService.id, i, j]"
            [searchKeyword]="commonService.searchKeyword"
            class="column-border"
          ></app-card>
        </div>
      </div>
    </div>
  </div>

  <app-footer />
</section>
